<!--
 * @Description:  栏圈管理
 * @Author: Ronda
 * @Date: 2022-03-25 17:28:37
 * @LastEditors: Ronda
 * @LastEditTime: 2022-04-17 19:48:01
-->
<template>
  <div>
    <!-- 第一行 -->
    <div class="btns">
      <!-- <el-row :gutter="20"> -->
      <el-form :inline="true" size="small">
        <el-button
          v-if="authsButton.filter((item) => {
            return item.perms===perms.saveOrUpdate;
          }).length > 0"
          type="primary"
          size="small"
          @click="toAdd"
        >添加</el-button>
        <el-button
          v-if="authsButton.filter((item) => {
            return item.perms===perms.deleteAll;
          }).length > 0"
          type="danger"
          size="small"
          style="margin-right: 10px"
          @click="toBatch"
        >批量禁用</el-button>
        <el-form-item>
          <el-input
            v-model="param.hName"
            style="display: inline-block; width: 150px"
            placeholder="请输入栏圈名称"
            size="small"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="param.hMax"
            style="display: inline-block; width: 150px;margin-right:10px"
            size="small"
            placeholder="请选择栏圈容量"
            clearable
          >
            <el-option
              v-for="item in Max"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-select
            v-model="param.fhName"
            style="display: inline-block; width: 150px;margin-right:10px"
            size="small"
            placeholder="请选择所属栏舍"
            clearable
          >
            <el-option
              v-for="item in fenceAll"
              :key="item.fhId"
              :label="item.fhName"
              :value="item.fhName"
            />
          </el-select>
          <el-select
            v-model="param.hEnable"
            style="display: inline-block; width: 150px"
            clearable
            placeholder="请选择是否可用"
          >
            <el-option label="可用" value="可用" />
            <el-option label="禁用" value="禁用" />
          </el-select>
        </el-form-item>
        <el-button type="text" size="small" @click="loadHurdles(1)">搜索</el-button>
      </el-form>
      <!-- </el-row> -->
    </div>
    <el-table
      v-loading="loading"
      size="small"
      :data="hurdles.list"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" :index="1" label="编号" width="80" />
      <el-table-column prop="hName" label="栏圈名称" width="180" />
      <el-table-column prop="hTime" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.hTime | fmtDate }}
        </template>
      </el-table-column>
      <el-table-column prop="hEnable" label="状态" />
      <el-table-column prop="hMax" label="栏圈容量" />
      <el-table-column prop="managerFenceHouse.fhName" label="所属栏舍" />
      <el-table-column
        prop="hDelete"
        label="状态"
        width="60px"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.hDelete==0" size="mini">启用</el-tag>
          <el-tag v-else size="mini" type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="hDesc" label="栏圈描述" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.hDelete==0 && authsButton.filter((item) => {
              return item.perms===perms.delete;
            }).length > 0"
            type="text"
            size="mini"
            @click.prevent="toDelete(scope.row.hId)"
          >禁用</el-button>
          <el-button
            v-if="scope.row.hDelete==0 && authsButton.filter((item) => {
              return item.perms===perms.saveOrUpdate;
            }).length > 0"
            type="text"
            size="mini"
            @click.prevent="toEdit(scope.row)"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        background
        small
        :current-page="param.page"
        :page-sizes="[2, 5, 8, 10, 20, 40, 80]"
        :page-size="param.pageSize"
        layout="total, prev, pager, next, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 抽屉 添加和修改栏圈信息-->
    <Briupdrawer
      :title="title"
      :drawer-visible="visible"
      width="40%"
      @on-change-visible="handlerVisibleChange"
    >
      <div slot="content">
        <el-form
          ref="myForm"
          :model="form"
          :label-width="formLabelWidth"
          :rules="rules"
        >
          <el-form-item
            label="栏圈名称"
            :label-width="formLabelWidth"
            prop="hName"
          >
            <el-input
              v-model="form.hName"
              autocomplete="off"
              placeholder="请输入栏圈名称"
              clearable
            />
          </el-form-item>
          <el-form-item
            label="栏圈容量"
            :label-width="formLabelWidth"
            prop="hMax"
          >
            <!-- oninput="value=value.replace(/[^1-9]/g,'')" -->
            <el-input
              v-model.number="form.hMax"
              autocomplete="off"
              placeholder="请输入栏圈容量"
              clearable
            />
          </el-form-item>
          <el-form-item
            label="栏圈状态"
            :label-width="formLabelWidth"
            prop="hEnable"
          >
            <el-radio-group
              v-model="form.hEnable"
              placeholder="请选择状态"
              clearable
            >
              <el-radio v-model="radio" label="可用" value="可用">可用</el-radio>
              <el-radio v-model="radio" label="禁用" value="禁用">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="所属栏舍"
            :label-width="formLabelWidth"
            prop="hFenceId"
          >
            <el-select
              v-model="form.hFenceId"
              style="display: inline-block; width: 150px"
              size="small"
              placeholder="请选择所属栏舍"
              clearable
            >
              <!-- {{fenceAll}} -->
              <el-option
                v-for="item in fenceAll"
                :key="item.fhId"
                :label="item.fhName"
                :value="item.fhId"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="栏圈描述"
            :label-width="formLabelWidth"
            prop="hDesc"
          >
            <el-input
              v-model="form.hDesc"
              type="textarea"
              placeholder="请输入栏圈描述"
              clearable
            />
          </el-form-item>
          <el-form-item label="创建日期" prop="hTime">
            <el-date-picker
              v-model="form.hTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
              :label-width="formLabelWidth"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          @click="handlerVisibleChange(false)"
        >取 消</el-button>
        <el-button type="primary" size="small" @click="toSave">确 定</el-button>
      </span>
    </Briupdrawer>
  </div>
</template>
<script>
import {
  findByOption,
  findAllMax,
  saveOrUpdate,
  delById,
  deleteByIdAll
} from '@/api/ptsBase/hurdles.js'
import { findAll } from '@/api/ptsBase/fenceHouse.js'
import { getSubsByUrl, authsPerms } from '@/utils/common'
export default {
  data() {
    return {
      // 静态按钮权限列表
      perms: authsPerms.hurdles,
      // 当前页面的按钮权限
      authsButton: [],
      // 设置可用禁用状态单选按钮
      radio: '1',
      // 设置容量为空
      hMax: '',
      // 表单校验
      rules: {
        hName: [{ required: true, message: '请输入栏圈名称', trigger: 'blur' }],
        hMax: [
          { required: true, message: '容量不能为空', trigger: 'blur' },
          { type: 'number', message: '容量必须是数值', trigger: 'blur' }
        ],
        hEnable: [
          { required: true, message: '请选择栏圈状态', trigger: 'blur' }
        ],
        hFenceId: [
          { required: true, message: '请选择所属栏舍', trigger: 'blur' }
        ],
        hDesc: [{ required: true, message: '请输入栏圈描述', trigger: 'blur' }],
        hTime: [{ required: true, message: '请选择创建时间', trigger: 'blur' }]
      },
      // 表单控件宽度
      formLabelWidth: '80px',
      // 时间日期配置项
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      // 抽屉里面表单对象
      form: {},
      // 控制抽屉的显示与隐藏
      visible: false,
      // 表格数据
      tableData: [],
      hurdles: '',
      // 存放vue变量hurdles
      param: {
        page: 1,
        pageSize: 10
      },
      // 后台总数据
      total: 0,
      // 栏圈最大容量
      Max: [],
      // 所有栏舍
      fenceAll: [],
      // 添加修改栏圈名称
      title: '',
      // 批量禁用的所有id
      hIds: []
    }
  },
  created() {
    // 按钮权限
    this.authsButton = getSubsByUrl(this.$route.path).subs
    this.loadHurdles()
    this.findMax()
    this.fenceHouseAll()
  },
  methods: {

    /**
     * @description: 批量禁用
     * @param {*}
     * @return {*}
     */
    toBatch() {
      if (this.hIds.length > 0) {
        this.$confirm('此操作将永久禁用该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            // 确认禁用
            const res = await deleteByIdAll(this.hIds)
            this.$message({
              type: 'success',
              message: res.message
            })
            this.loadHurdles()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消禁用'
            })
          })
      }
    },
    /**
     * @description: 表格选项发生变化触发的事件
     * @param {*}
     * @return {*}
     */
    handleSelectionChange(val) {
      this.hIds = val.map((item) => {
        return item.hId
      })
    },
    /**
     * @description: 去禁用
     * @param {*}
     * @return {*}
     */
    toDelete(hId) {
      this.$confirm('此操作将永久禁用该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          // 确认禁用
          const res = await delById(hId)
          this.$message({
            type: 'success',
            message: res.message
          })
          this.loadHurdles()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消禁用'
          })
        })
    },
    /**
     * @description: 去修改栏圈信息
     * @param {*}
     * @return {*}
     */
    toEdit(record) {
      this.visible = true
      this.title = '修改栏圈信息'
      this.form = { ...record }
    },
    /**
     * @description: 去添加
     * @param {*}
     * @return {*}
     */
    toAdd() {
      // 抽屉弹出
      this.visible = true
      // 标题
      this.title = '添加栏圈'
      this.form = {}
    },

    /**
     * @description: 去保存
     * @param {*}
     * @return {*}
     */
    toSave() {
      this.$refs['myForm'].validate(async(valid) => {
      //   if (!this.hMax) {
      //   this.errors.push('hMax required.');
      // }
        if (valid) {
          // alert("submit!");
          // 发送保存请求
          const res = await saveOrUpdate(this.form)
          this.handlerVisibleChange(false)
          console.log(res)
          this.$message({
            type: 'success',
            message: res.message
          })
          this.loadHurdles()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /**
     * @description: 处理visible变化的钩子函数,解决抽屉无法收缩的bug
     * @param {*} val
     * @return {*}
     */
    handlerVisibleChange(val) {
      this.visible = val
      this.$refs['myForm'].resetFields()
    },
    /**
     * @description: 查询所有栏舍
     * @param {*}
     * @return {*}
     */
    async fenceHouseAll() {
      const res = await findAll()
      // console.log(res);
      this.fenceAll = res.data
    },
    /**
     * @description: 查询所有栏圈最大容量
     * @param {*}
     * @return {*}
     */
    async findMax() {
      const res = await findAllMax()
      // console.log(res);
      this.Max = res.data
    },
    /**
     * @description: 页码条数发生变化触发的函数
     * @param {*}
     * @return {*}
     */
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.param.pageSize = pageSize
      // 重新发送分页查询数据请求
      this.loadHurdles()
    },
    /**
     * @description: 页码发生变化触发的函数
     * @param {*}
     * @return {*}
     */
    handleCurrentChange(page) {
      console.log(page)
      this.param.page = page
      // 重新发送分页查询数据请求
      this.loadHurdles()
    },
    /**
     * @description: 根据分页请求查询数据
     * @param {*}
     * @return {*}
     */
    async loadHurdles(page) {
      if (page) {
        this.param.page = page
      }
      const temp = { ...this.param }
      for (const key in temp) {
        if (!temp[key]) {
          delete temp[key]
        }
      }
      this.loading = true
      const res = await findByOption(temp)
      // console.log(res);
      this.hurdles = res.data
      this.total = res.data.total
      this.loading = false
    }
  }
}
</script>
